<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 阻止浏览器发送referrer信息 -->
    <meta name="referrer" content="no-referrer" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>获取图片</title>

    <!-- 页面样式 -->
    <style>
        /* 清除默认内外边距 */
        * {
            margin: 0;
            padding: 0;
        }

        /* 设置主内容区为弹性布局，子元素均匀分布并允许换行 */
        ul {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        /* 去除列表项的默认样式，并设置宽度、圆角 */
        li {
            list-style: none;
            width: 33%;
            /* 每个图片块占父容器的三分之一 */
            border-radius: 20px;
        }

        /* 图片自适应父容器大小 */
        img {
            width: 100%;
        }

        /* 创建按钮组容器，居中显示子元素 */
        div {
            display: flex;
            justify-content: space-around;
            margin: 10px 0;
        }

        /* 定义按钮样式 */
        button {
            min-width: 130px;
            /* 最小宽度 */
            height: 40px;
            color: #fff;
            padding: 5px 10px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            /* 添加过渡动画 */
            position: relative;
            display: inline-block;
            outline: none;
            border-radius: 5px;
            border: none;
            background-size: 120% auto;
            /* 背景渐变大小 */
            background-image: linear-gradient(315deg, #4ecdc4 0%, #c797eb 75%);
        }

        /* 鼠标悬停时背景位置变化 */
        button:hover {
            background-position: right center;
        }

        /* 点击时下移效果 */
        button:active {
            top: 2px;
        }

        /* 图片列表容器，添加相对定位以便扩展瀑布流布局（此处未用到） */
        .img-list {
            position: relative;
        }
    </style>
</head>

<body>
    <!-- 按钮组，用于切换不同类型的图片 -->
    <div>
        <button>动物</button>
        <button>美女</button>
        <button>汽车</button>
        <button>漫画</button>
        <button>食物</button>
        <button>游戏</button>
        <button>电影</button>
        <button>人物</button>
        <button>手机</button>
        <button>风景</button>
    </div>

    <!-- 图片列表容器 -->
    <ul class="img-list" id="content"></ul>

    <!-- JavaScript脚本 -->
    <script>
        // 初始化页面时绑定按钮点击事件
        click();

        function click() {
            // 存储不同类型的文字对应值
            let types = ["animal", "beauty", "car", "comic", "food", "game", "movie", "person", "phone", "scenery"];

            // 获取所有按钮元素
            let btns = document.querySelectorAll("button");

            // 给每个按钮绑定点击事件处理函数
            btns.forEach((item, index) => {
                item.onclick = function () {
                    // 根据当前按钮索引调用获取指定类型图片的方法
                    getImg(types[index]);
                }
            });
        }

        // 加载初始图片或加载指定类型的图片
        getImg();

        function getImg(type) {
            // 根据是否有类型参数构建请求URL
            let url = 'https://api.apiopen.top/api/getImages?page=0&size=20';
            if (type) {
                url += '&type=' + type;
            }

            // 创建XMLHttpRequest对象发起异步请求
            var xhr = new XMLHttpRequest();

            // 请求状态改变时执行的回调函数
            xhr.onreadystatechange = function () {
                // 当请求完成且响应成功时处理数据
                if (xhr.readyState === 4 && xhr.status === 200) {
                    success(xhr.responseText);
                }
            };

            // 发起GET请求
            xhr.open('GET', url);
            xhr.send();
        }

        // 成功获取图片数据后的处理函数
        function success(data) {
            let ul = document.querySelector(".img-list");
            ul.innerHTML = ''; // 清空列表

            // 解析JSON数据
            let list = JSON.parse(data).result.list;
            let items = [];
            let columns = []; // 存储每一列底部位置

            // 初始化列数组
            for (let i = 0; i < 3; i++) { // 假设固定为3列
                columns.push(0);
            }

            list.forEach(item => {
                let li = document.createElement('li');
                li.id = item.id;
                li.dataset.type = item.type;
                let img = document.createElement('img');
                img.src = item.url;
                img.onload = function () {
                    setLiHeight(li, img.offsetHeight);
                    items.push(li);
                    if (items.length === list.length) { // 所有图片加载完成后再进行布局
                        layoutImages(items, columns);
                    }
                };
                li.appendChild(img);
                ul.appendChild(li);
            });
            // 定义设置li高度和布局函数
            function setLiHeight(li, height) {
                li.style.height = `${height}px`;
            }

            function layoutImages(items, columns) {
                items.forEach((item, index) => {
                    let minColIndex = getMinColumn(columns);
                    let colHeight = columns[minColIndex];
                    item.style.position = 'absolute';
                    item.style.top = `${colHeight+10}px`;
                    item.style.left = `${(minColIndex * 100 / columns.length)+1}%`; // 根据列数计算left值
                    columns[minColIndex] += item.offsetHeight;
                });

                // 设置容器高度为所有列中最长的那一列的高度
                let maxColHeight = Math.max(...columns);
                ul.style.height = `${maxColHeight}px`;
            }

            function getMinColumn(columns) {
                return columns.indexOf(Math.min(...columns));
            }
        }
    </script>
</body>

</html>